import React, { useEffect, useState } from 'react';
import { Button, Tabs } from 'antd';
import { connect } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import TableCom from '../TableCom/TableCom';
import ConfirmModal from '../ConfirmModal';
import DistributeModal from '../DistributeModal';
import { ORDER_OPT } from '../../../store/constants/order';

// UI 组件
const TabCom = props => {
  const { onSearch, originTableData, searchRes } = props;
  const navigate = useNavigate();
  // const location = useLocation();
  const [tabArr, setTabArr] = useState();
  const [activeKey, setActiveKey] = useState('0');
  // 配置 表格列
  const width = 100;

  // 切换 tab(不用触发 onchange 事件)===>解决1：数据改变，table 未更新问题，table数据源未改变
  // const onChange = () => {};

  // 监测 搜索状态
  useEffect(() => {
    const tableColumns = [
      {
        title: '订单号',
        width,
        dataIndex: 'orderNum',
        key: '1',
        fixed: 'left',
      },
      {
        title: '商品',
        width: 150,
        dataIndex: 'goods',
        key: '2',
      },
      {
        title: '数量',
        dataIndex: 'goodsNum',
        key: '3',
        width,
      },
      {
        title: '实付价格',
        dataIndex: 'paidPrice',
        key: '4',
        width,
      },
      {
        title: '配送方式',
        dataIndex: 'distribute',
        key: '5',
        width,
      },
      {
        title: '用户名',
        dataIndex: 'username',
        key: '6',
        width,
      },
      {
        title: '用户手机',
        dataIndex: 'phone',
        key: '7',
        width: 150,
      },
      {
        title: '下单时间',
        dataIndex: 'orderTime',
        key: '8',
        width: 200,
      },
      {
        title: '支付方式',
        dataIndex: 'payMethod',
        key: '9',
        width: 150,
      },
      {
        title: '支付平台',
        dataIndex: 'payPlatform',
        key: '10',
        width: 150,
      },
      {
        title: '推广渠道',
        dataIndex: 'promotionChannel',
        key: '11',
        width: 150,
      },
      {
        title: '收件人',
        dataIndex: 'consignee',
        key: '12',
        width,
      },
      {
        title: '收件人手机',
        dataIndex: 'consigneePhone',
        key: '13',
        width: 150,
      },
      {
        title: '收件人地址',
        dataIndex: 'consigneeAddress',
        key: '14',
        width: 300,
      },
      {
        title: '状态',
        dataIndex: 'orderState',
        key: '15',
        width,
        fixed: 'right',
      },
      {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 200,
        render: el => {
          const id = el.orderId;
          let Com = null;
          switch (el.orderState) {
            // 模态框进入按钮
            case ORDER_OPT[1].label:
              Com = (
                <ConfirmModal title='确定要取消' btnCont='取消订单' id={id} />
              );
              break;
            // 1===发货，2===修改物流
            case ORDER_OPT[2].label:
              Com = <DistributeModal btnCont='发货' orderItem={el} type={1} />;
              break;
            case ORDER_OPT[3].label:
              Com = (
                <DistributeModal btnCont='修改物流' orderItem={el} type={2} />
              );
              break;
            case ORDER_OPT[6].label:
              Com = <Button type='link'>处理</Button>;
              break;
            default:
              break;
          }
          return (
            <>
              <Button
                type='link'
                onClick={() => {
                  navigate('/home/order-detail', { state: { id } });
                }}>
                查看
              </Button>
              {Com}
            </>
          );
        },
      },
    ];
    // console.log(onSearch);
    // console.log(searchRes);
    // console.log(originTableData);
    // 将 tableData 定义为局部变量，解决 useState() 异步的问题
    let tableData = [];
    // originTableData 改变时，更新 tabArr 数据
    // 待优化 用单个 <TableCom/> 只更新数据
    if (!onSearch) {
      tableData = [...originTableData];
    } else {
      tableData = [...searchRes];
    }
    // console.log('222', tableData);
    setTabArr([
      {
        key: '0',
        label: ORDER_OPT[0].label,
        children: (
          <TableCom tableColumns={tableColumns} tableData={[...tableData]} />
        ),
      },
      {
        key: '1',
        label: ORDER_OPT[1].label,
        children: (
          <TableCom
            tableColumns={tableColumns}
            tableData={tableData.filter(
              el => el.orderState === ORDER_OPT[1].label
            )}
          />
        ),
      },
      {
        key: '2',
        label: ORDER_OPT[2].label,
        children: (
          <TableCom
            tableColumns={tableColumns}
            tableData={tableData.filter(
              el => el.orderState === ORDER_OPT[2].label
            )}
          />
        ),
      },
      {
        key: '3',
        label: ORDER_OPT[3].label,
        children: (
          <TableCom
            tableColumns={tableColumns}
            tableData={tableData.filter(
              el => el.orderState === ORDER_OPT[3].label
            )}
          />
        ),
      },
      {
        key: '4',
        label: ORDER_OPT[4].label,
        children: (
          <TableCom
            tableColumns={tableColumns}
            tableData={tableData.filter(
              el => el.orderState === ORDER_OPT[4].label
            )}
          />
        ),
      },
      {
        key: '5',
        label: ORDER_OPT[5].label,
        children: (
          <TableCom
            tableColumns={tableColumns}
            tableData={tableData.filter(
              el => el.orderState === ORDER_OPT[5].label
            )}
          />
        ),
      },
      {
        key: '6',
        label: ORDER_OPT[6].label,
        children: (
          <TableCom
            tableColumns={tableColumns}
            tableData={tableData.filter(
              el => el.orderState === ORDER_OPT[6].label
            )}
          />
        ),
      },
    ]);
  }, [onSearch, originTableData, searchRes, navigate]);
  // useEffect(() => {
  //   // 限制来处
  //   console.log(location);
  //   if (location.state.from==='/home/dashboard') {
  //     setActiveKey(location.state.defaultVal);
  //   }
  // }, [location]);
  // 主页跳转
  const changeTab = key => {
    setActiveKey(key);
  };
  return (
    <Tabs
      type='card'
      items={tabArr}
      activeKey={activeKey}
      onChange={changeTab}
      // defaultActiveKey={defaultVal ? String(defaultVal) : ''}
    />
  );
};

// 容器组件
export default connect(
  state => ({
    originTableData: state.orderReducer,
    onSearch: state.searchReducer,
    searchRes: state.searchResReducer,
  }),
  {}
)(TabCom);
